import { useAppDispatch } from '@/hooks';
import {
    getHospitalSetAsync, useSelectorHosp, getHospitalSetLockIdAsync
} from '@/store/slice/hosp';
import { Button, Space, Switch, Table, Tooltip } from 'antd';
import React, { useEffect, useState } from 'react';
import { FormOutlined, DeleteOutlined } from "@ant-design/icons";
import { useSelectorCommon } from '@/store/slice/common';
import HospitalModal from "@/pages/hospital/hospitalSet/components/HospitalModal";



function HospitalSet() {
    const dispatch = useAppDispatch();
    const { hospSetList } = useSelectorHosp();
    // console.log(hospSetList);
    const {pageInfo,loading} = useSelectorCommon();
      // 控制modal的显示与隐藏
      const [isModalVisible,setIsModalVisible] = useState<boolean>(false);
      // 控制modal的标题
    const [modalTitle, setModalTitle] = useState<string>("添加医院设置");
     // 指定修改的内容
     const [hospitalSetInfo,setHospitalSetInfo] = useState<any>(null);
    useEffect(() => {
        dispatch(getHospitalSetAsync(1, 5))
    }, [])
    return (
        <div>
            <div style={{marginBottom: 16}}>
                <Button type={"primary"} onClick={() => {
                    setHospitalSetInfo({});
                      setModalTitle("添加医院设置");
                      setIsModalVisible(true);
                  }}>添加医院设置</Button>
                  {/*<Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>*/}
                  {/*    Reload*/}
                  {/*</Button>*/}
                  {/*<span style={{marginLeft: 8}}>*/}
                  {/*  {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}*/}
                  {/*</span>*/}
              </div>

            <Table
                loading={loading}
                pagination={{
                    ...pageInfo,
                    onChange(page,pageSize){
                        // console.log(page,pageSize);
                        dispatch(getHospitalSetAsync(page,pageSize));
                    }
                }}
                // rowSelection={rowSelection}
                rowKey={"id"}
                /*增加表格边框*/
                bordered={true}
                scroll={{ x: 1800 }}
                columns={[
                    {
                        title: "序号",
                        width: 70,
                        align: "center",// 居中
                        // dataIndex:"id",
                        // 第一个参数：如果没有设置dataIdex,那么值为该行信息
                        render(value: any, rows: any, index: number) {
                            // console.log(value,rows,index);
                            return (pageInfo.current-1)*pageInfo.pageSize+ index+1;
                        }
                    }, {
                        title: "医院名称",
                        align: "center",
                        width: 200,
                        ellipsis: true,// 超过宽度将自动省略
                        dataIndex: "hosname"
                    }, {
                        title: "医院编号",
                        align: "center",
                        dataIndex: "hoscode"
                    }, {
                        title: "是否锁定",
                        align: "center",
                        // 0：锁定 1：未锁定
                        dataIndex: "status",
                        render(status: number, rows) {
                            return (
                                <Switch checked={status === 0} onChange={() => {
                                    // dispatch(changeStateById(rows.id))
                                    // 2- 调用getHospitalSetLockIdAsync
                                    dispatch(getHospitalSetLockIdAsync(rows.id, status));
                                }} />
                            )
                        }
                    }, {
                        title: "api基础地址",
                        align: "center",
                        dataIndex: "apiUrl"
                    }, {
                        title: "密钥",
                        align: "center",
                        width: 150,
                        ellipsis: true,// 超过宽度将自动省略
                        dataIndex: "signKey"
                    }, {
                        title: "联系人姓名",
                        align: "center",
                        dataIndex: "contactsName"
                    }, {
                        title: "联系人手机",
                        align: "center",
                        dataIndex: "contactsPhone"
                    }, {
                        title: "添加时间",
                        align: "center",
                        dataIndex: "createTime"
                    }, {
                        title: "更新时间",
                        align: "center",
                        dataIndex: "updateTime"
                    }, {
                        title: "操作",
                        align: "center",
                        dataIndex: "hosname",
                        fixed: "right",// 右浮动
                        render(rows) {
                            return (
                                <Space>
                                    <Tooltip title="编辑">
                                        <Button onClick={()=>{
                                            setModalTitle("修改医院设置");
                                            setHospitalSetInfo({...rows});
                                            setIsModalVisible(true);
                                        }} type="primary" shape="circle" icon={<FormOutlined />} />
                                    </Tooltip>

                                    <Tooltip title="删除">
                                        <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} />
                                    </Tooltip>
                                </Space>
                            )
                        }
                    }
                ]}
                dataSource={hospSetList} />
             <HospitalModal hospitalSetInfo = {hospitalSetInfo} modalTitle={modalTitle} setIsModalVisible={setIsModalVisible} isModalVisible={isModalVisible}/>
        </div>
    );
}

export default HospitalSet;


